<!--
* @author wn
* @date 2022/05/10 10:50:00
* @description: 最新专题
!-->
<template>
	<home-panel title="最新专题">
		<template #right>
			<xtx-more />
		</template>
		<!-- 默认插槽 -->
		<ul class="special-list" ref="target">
			<li class="special-item" v-for="i in specials" :key="i.id">
				<router-link to="/">
					<img v-lazy="i.cover" alt />
					<div class="meta">
						<p class="title">
							<span class="top ellipsis">{{ i.title }}</span>
							<span class="sub ellipsis">{{ i.summary }}</span>
						</p>
						<span class="price">&yen;{{ i.lowestPrice }}起</span>
					</div>
				</router-link>
				<div class="foot">
					<span class="like">
						<i class="iconfont icon-hart1"></i>{{ i.collectNum }}
					</span>
					<span class="view">
						<i class="iconfont icon-see"></i>{{ i.viewNum }}
					</span>
					<span class="reply">
						<i class="iconfont icon-message"></i>{{ i.replyNum }}
					</span>
				</div>
			</li>
		</ul>
	</home-panel>
</template>
<script>
import { useLazyData } from '@/hooks'
import HomePanel from './HomePanel'
import { findSpecial } from '@/network/home'
export default {
	name: 'HomeSpecial',
	components: {
		HomePanel,
	},
	setup() {
		const { target, result: specials } = useLazyData(findSpecial)
		return { target, specials }
	},
}
</script>
<style scoped lang="less">
.home-panel {
	background: #f5f5f5;
}
.special-list {
	display: flex;
	justify-content: space-between;
	height: 400px;
	padding-bottom: 40px;
	.special-item {
		width: 404px;
		background: #fff;
		.hoverShadow();
		a {
			display: block;
			width: 100%;
			height: 288px;
			position: relative;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.meta {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 288px;
				// 渐变 从下到上 透明度  0.8 到0.5
				background-image: linear-gradient(
					to top,
					rgba(0, 0, 0, 0.8),
					transparent 50%
				);
				.title {
					position: absolute;
					bottom: 0px;
					left: 0;
					padding-left: 16px;
					width: 70%;
					height: 70px;
					.top {
						display: block;
						color: #fff;
						font-size: 22px;
					}
					.sub {
						display: block;
						font-size: 19px;
						color: #999;
					}
				}
				.price {
					position: absolute;
					bottom: 25px;
					right: 16px;
					line-height: 1;
					padding: 4px 8px 4px 7px;
					color: @priceColor;
					font-size: 17px;
					background-color: #fff;
					border-radius: 2px;
				}
			}
		}
		.foot {
			height: 72px;
			line-height: 72px;
			padding: 0 20px;
			font-size: 16px;
			i {
				display: inline-block;
				width: 15px;
				height: 14px;
				margin-right: 5px;
				color: #999;
			}
			.like,
			.view {
				margin-right: 25px;
				vertical-align: middle;
			}
			.reply {
				float: right;
				vertical-align: middle;
			}
		}
	}
}
</style>
